<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>全流程成材率</h1>
      </div>
    </div>
    <div class="page-layout">
      <div class="main-container">
        <div class="area yield-card">
          <div class="title" style="margin-top: 1vh">
            <img src="/src/assets/images/report/tcm2280/title-icon1.png" />
            <span>机组成材率</span>
          </div>
          <div class="yield-graph">
            <pie :data="graphData.pieData" class="pie" :call-back="onPieClick" :other="graphData.pieOther" />
            <graph-bar-line
              :datax="graphData.barData.x"
              :data-bar1="graphData.barData.y1"
              :data-bar2="graphData.barData.y2"
              :data-line1="graphData.barData.y3"
              :bar-name="['目标值%', '实际值%']"
              :line-name="['损失比%']"
              :config="graphData.barData.config"
              class="bar"
            />
          </div>
        </div>
        <div class="main-yield">
          <div class="main-condition">
            <div class="condition">
              <div class="buttons" style="height: 3vh">
                <button
                  v-for="dateType in dateTypes"
                  :key="dateType"
                  :class="{ 'is-active': condition.curDateType === dateType }"
                  @click="dateTypeClick(dateType)"
                >
                  {{ dateType }}
                </button>
              </div>
              <el-date-picker
                v-model="condition.dateRange"
                type="daterange"
                range-separator="至"
                value-format="YYYY-MM-DD"
                style="height: 3vh"
                class="date-picker"
                @change="dateChange"
              />
            </div>
          </div>
          <div class="yields">
            <img src="/src/assets/images/yield/yield-main.png" alt="" />
            <div class="pos-all" @click="yieldTreeClick('all', yieldTree.allActual, yieldTree.allTarget)">
              总成材率
              <span class="actual" :style="{ color: Number(yieldTree.allActual) > Number(yieldTree.allTarget) ? '#6AF457' : '#F55B5B' }">
                {{ yieldTree.allActual + '%' }}
              </span>
              <span class="common-text" :style="{ color: Number(yieldTree.allActual) > Number(yieldTree.allTarget) ? '#6AF457' : '#F55B5B' }">
                (目标
              </span>
              <span class="target" :style="{ color: Number(yieldTree.allActual) > Number(yieldTree.allTarget) ? '#6AF457' : '#F55B5B' }">
                {{ yieldTree.allTarget + '%' }}
              </span>
              <span class="common-text" :style="{ color: Number(yieldTree.allActual) > Number(yieldTree.allTarget) ? '#6AF457' : '#F55B5B' }">)</span>
            </div>
            <div class="ab-text pos-cold" @click="yieldTreeClick('cal', yieldTree.coldActual, yieldTree.coldTarget)">
              <div class="value" :style="{ color: Number(yieldTree.coldActual) > Number(yieldTree.coldTarget) ? '#fff' : '#F55B5B' }">
                {{ yieldTree.coldActual + '%' }}
              </div>
              <div>冷轧成材率(目标{{ yieldTree.coldTarget + '%' }})</div>
            </div>
            <div class="ab-text pos-1630" @click="yieldTreeClick('cal1630', yieldTree.cal1630Actual, yieldTree.cal1630Target)">
              <div class="value" :style="{ color: Number(yieldTree.cal1630Actual) > Number(yieldTree.cal1630Target) ? '#fff' : '#F55B5B' }">
                {{ yieldTree.cal1630Actual + '%' }}
              </div>
              <div>连退1630成材率(目标{{ yieldTree.cal1630Target + '%' }})</div>
            </div>
            <div class="ab-text pos-2150" @click="yieldTreeClick('cal2150', yieldTree.cal2150Actual, yieldTree.cal2150Target)">
              <div class="value" :style="{ color: Number(yieldTree.cal2150Actual) > Number(yieldTree.cal2150Target) ? '#fff' : '#F55B5B' }">
                {{ yieldTree.cal2150Actual + '%' }}
              </div>
              <div>连退2150成材率(目标{{ yieldTree.cal2150Target + '%' }})</div>
            </div>
            <div class="ab-text pos-1870" @click="yieldTreeClick('cgl', yieldTree.cgl1870Actual, yieldTree.cgl1870Target)">
              <div class="value" :style="{ color: Number(yieldTree.cgl1870Actual) > Number(yieldTree.cgl1870Target) ? '#fff' : '#F55B5B' }">
                {{ yieldTree.cgl1870Actual + '%' }}
              </div>
              <div>镀锌成材率(目标{{ yieldTree.cgl1870Target + '%' }})</div>
            </div>
          </div>
          <div class="text-sub">
            <img src="/src/assets/images/yield/text-sub.png" alt="" />
            <!-- 冷轧产品11月份综合成材率
              <span>95%</span>，公司下达目标为<span>94.15%</span>，对比冷轧工序引领目标高<span>0.85%</span>，综合成材率指标呈不断提升趋势 -->
            <div class="summary-text" v-html="yieldTree.summary"></div>
          </div>
        </div>
        <div class="area yield-card">
          <div class="title-head" style="margin-top: 1vh">
            <div class="title">
              <img src="/src/assets/images/report/tcm2280/title-icon1.png" />
              <span>坯料判废量(吨)</span>
            </div>
            <div class="buttons" style="height: 2.5vh">
              <button
                v-for="wasteType in wasteTypes"
                :key="wasteType"
                :class="{ 'is-active': condition.wasteType === wasteType }"
                @click="wasteTypeClick(wasteType)"
              >
                {{ wasteType == 'reason' ? '原因' : '钢种' }}
              </button>
            </div>
          </div>
          <div class="process-container" v-for="(item, index) in wasteInfo">
            <div class="process-info">
              <span>{{ item.name }}</span>
              <span class="process-num">{{ item.current }}/{{ item.total }}</span>
            </div>
            <div class="process-bar">
              <div class="process-background"></div>
              <div
                class="process-inner"
                :style="{ '--target-width': (Number(item.current) / Number(item.total)) * 100 + '%', animationDelay: index * 0.1 + 0.2 + 's' }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-container">
        <el-table
          size="small"
          :data="tableData"
          style="width: 100%"
          max-height="31vh"
          :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center' }"
          :cell-style="{
            color: '#fff',
            textAlign: 'center',
            height: '3vh',
            border: '1px solid #2875A6',
          }"
          show-overflow-tooltip
          :span-method="spanFunc"
          @row-click="tableRowClick"
        >
          <el-table-column prop="process" label="工序" />
          <el-table-column prop="line" label="机组" />
          <el-table-column prop="factor" label="影响成材率因素" />
          <el-table-column prop="target" label="理论值[吨]" />
          <el-table-column prop="realvalue" label="本期实际[吨]" />
          <el-table-column prop="loss" label="损失重量[吨]" />
          <el-table-column prop="prorate" label="影响成材率指标（%）" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onBeforeMount } from 'vue';
  import { ElMessage, ElNotification } from 'element-plus';
  import { useUserStore } from '/@/store/modules/system/user';
  import { ActualPerformanceRollDeviationApi } from '/@/api/deviationanalysis/ActualPerformanceRollDeviation';
  import { useRouter } from 'vue-router';
  import pie from './components/pie.vue';
  import GraphBarLine from './components/GraphBarLine.vue';
  import dayjs from 'dayjs';

  const data = ref([
    { menuName: 'FullProcessYieldRate', menuTitle: '全流程成材率主页', menuId: '1' },
    { menuName: 'FullprocessYieldold', menuTitle: '主页旧' },
    { menuName: 'FullprocessYield', menuTitle: '单产线成材率分析画面' },
    { menuName: 'CalculationOfYieldRate', menuTitle: '各产线全流程成材率计算及人工录入' },
    { menuName: 'DefectYieldAnalysis', menuTitle: '产品成材率全流程分析' },
    { menuName: 'CurrenSituationLossesOptimization', menuTitle: '成材率分档数据统计' },
    { menuName: 'HotRollingWidthAllowance', menuTitle: '热轧宽度余量统计分析' },
    { menuName: 'HotRollingReductionAmount', menuTitle: '热轧缩径量规格统计' },
    { menuName: 'qualityDefect', menuTitle: '质量缺陷明细' },
    { menuName: 'OtherFullprocessYield', menuTitle: '其他页面留存' },
  ]);

  onBeforeMount(() => {
    useUserStore().setTagNav(data.value);
  });

  const router = useRouter();

  interface Condition {
    curDateType: DateType;
    dateRange: string[];
    wasteType: WasteType;
  }

  interface YieldItem {
    linename: 'all' | 'cal1630' | 'cal2150' | 'cgl' | 'cal';
    totalznyield: string; // 实际产量（根据后端返回类型调整）
    targetvalue: string; // 目标产量（根据后端返回类型调整）
  }

  const LINE_YIELD_MAPPING: Record<YieldItem['linename'], { actualKey: keyof YieldTree; targetKey: keyof YieldTree }> = {
    all: { actualKey: 'allActual', targetKey: 'allTarget' },
    cal1630: { actualKey: 'cal1630Actual', targetKey: 'cal1630Target' },
    cal2150: { actualKey: 'cal2150Actual', targetKey: 'cal2150Target' },
    cgl: { actualKey: 'cgl1870Actual', targetKey: 'cgl1870Target' },
    cal: { actualKey: 'coldActual', targetKey: 'coldTarget' },
  };

  interface YieldTree {
    allTarget: string;
    allActual: string;
    coldTarget: string;
    coldActual: string;
    cal1630Target: string;
    cal1630Actual: string;
    cal2150Target: string;
    cal2150Actual: string;
    cgl1870Target: string;
    cgl1870Actual: string;
    summary: string;
    curLine: string;
    curTarget: string;
    curActual: string;
  }

  type DateType = '日' | '周' | '月';
  type WasteType = 'reason' | 'steelGrade';
  const dateTypes: DateType[] = ['日', '周', '月'];
  const wasteTypes: WasteType[] = ['reason', 'steelGrade'];
  const wasteInfo = ref([
    { name: '切头', total: '2000000', current: '1321038' },
    { name: '切头', total: '2000000', current: '1221038' },
    { name: '切头', total: '2000000', current: '1121038' },
    { name: '切头', total: '2000000', current: '1021038' },
  ]);

  const yieldTree = reactive<YieldTree>({
    allTarget: '',
    allActual: '',
    coldTarget: '',
    coldActual: '',
    cal1630Target: '',
    cal1630Actual: '',
    cal2150Target: '',
    cal2150Actual: '',
    cgl1870Target: '',
    cgl1870Actual: '',
    summary: '',
    curLine: '',
    curActual: '',
    curTarget: '',
  });

  const condition = reactive<Condition>({
    curDateType: '周',
    dateRange: [],
    wasteType: 'reason',
  });

  const DATE_RANGE_CALCULATOR: Record<
    DateType,
    () => [string, string] // 函数返回 [开始日期, 结束日期]
  > = {
    日: () => {
      const today = dayjs().format('YYYY-MM-DD');
      return [today, today]; // 日：开始=结束=今天
    },
    周: () => {
      const current = dayjs();
      return [
        current.startOf('week').format('YYYY-MM-DD'), // 本周第一天
        current.endOf('week').format('YYYY-MM-DD'), // 本周最后一天
      ];
    },
    月: () => {
      const current = dayjs();
      return [
        current.startOf('month').format('YYYY-MM-DD'), // 本月第一天
        current.endOf('month').format('YYYY-MM-DD'), // 本月最后一天
      ];
    },
  };

  const dateTypeClick = (dateType: DateType) => {
    condition.curDateType = dateType;
    const dateRange = DATE_RANGE_CALCULATOR[dateType]();
    dateChange(dateRange);
  };

  const dateChange = (val: string[]) => {
    condition.dateRange = val;
    fetchData();
  };

  const wasteTypeClick = (wasteType: WasteType) => {
    condition.wasteType = wasteType;
    fetchData();
  };

  const yieldTreeClick = (line: string, actual: string, target: string) => {
    yieldTree.curLine = line;
    yieldTree.curTarget = target;
    yieldTree.curActual = actual;
    getLossAnalysis();
  };

  // ------------------------------------- 表格合并 ----------------------------------------
  const getSpanMap = (data: any) => {
    const processMap = new Map(); // 工序的合并信息
    const lineMap = new Map(); // 产线的合并信息

    data.forEach((item: any, index: any) => {
      // 构造层级唯一键
      const processKey = item.process;
      const lineKey = `${processKey}_${item.line}`;

      // 统计品名的合并行数
      if (!processMap.has(processKey)) {
        processMap.set(processKey, { start: index, count: 1 });
      } else {
        processMap.get(processKey).count++;
      }

      // 统计表面等级的合并行数
      if (!lineMap.has(lineKey)) {
        lineMap.set(lineKey, { start: index, count: 1 });
      } else {
        lineMap.get(lineKey).count++;
      }
    });

    return { processMap, lineMap };
  };
  const tableData = ref([
    {
      process: '机组1',
      line: '产线1',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组1',
      line: '产线1',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组1',
      line: '产线2',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组1',
      line: '产线2',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组2',
      line: '产线1',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组2',
      line: '产线1',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组2',
      line: '产线1',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组2',
      line: '产线2',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
    {
      process: '机组2',
      line: '产线2',
      factor: '工艺路线',
      target: 100,
      realvalue: 90,
      loss: 10,
      prorate: 10,
    },
  ]);
  const spanMap = ref(getSpanMap(tableData.value));
  const spanFunc = ({ row, rowIndex, columnIndex }: { row: any; rowIndex: number; columnIndex: number }) => {
    const { processMap, lineMap } = spanMap.value;

    // 工序（第1列）
    if (columnIndex === 0) {
      const processKey = row.process;
      const process = processMap.get(processKey);
      if (process && rowIndex === process.start) {
        return { rowspan: process.count, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }

    // 产线（第2列）
    if (columnIndex === 1) {
      const processKey = row.process;
      const lineKey = `${processKey}_${row.line}`;
      const line = lineMap.get(lineKey);
      if (line && rowIndex === line.start) {
        return { rowspan: line.count, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }

    return { rowspan: 1, colspan: 1 };
  };

  // ------------------------------------- 图数据 ---------------------------------------------
  const graphData = reactive({
    pieData: [
      // { name: '酸轧2280', value: 82.9 },
      // { name: '连退1630', value: 88.2 },
      // { name: '连退2150', value: 40.8 },
      // { name: '镀锌1870', value: 64.5 },
      // { name: '重卷1630', value: 10.2 },
      // { name: '重卷2150', value: 20.8 },
      // { name: '重卷1870', value: 70.5 },
    ],
    barData: {
      x: [],
      y1: [],
      y2: [],
      y3: [],
      config: {
        barWidth: 15, // 🔥 目标 barWidth=15
        diamond: {
          size: [17, 9], // 钻石大小：[宽度=15+2, 高度≈15/1.625]
          offset1: ['-60%', '-40%'], // 第一个钻石（有第二个柱体）偏移
          offset2: ['63%', '-40%'], // 第二个钻石偏移（水平百分比同步减小）
        },
        barGap: '30%', // 柱体间距（同步缩小，避免空隙过大）
      },
    },
    pieOther: [],
  });

  const onPieClick = (params: any) => {
    const lineMap: Record<string, string> = {
      镀锌1870: 'cgl1870',
      连退1630: 'cal1630',
      连退2150: 'cal2150',
      酸轧2280: 'tcm2280',
      重卷1630: 'rcl1630',
      重卷2150: 'rcl2150',
      重卷2280: 'rcl2280',
    };
    const { dateRange } = condition;
    const [start, end] = dateRange;
    const routerParams: any = {};
    routerParams.tab = lineMap[params.name] || 'tcm2280';
    routerParams.start = start;
    routerParams.end = end;
    router.push({
      path: '/yiledAndSubsection/CalculationOfYieldRate',
      query: routerParams,
    });
  };

  const tableRowClick = (row: any) => {
    const lineMap: Record<string, string> = {
      镀锌: 'cgl1870',
      连退1630: 'cal1630',
      连退2150: 'cal2150',
      酸轧: 'tcm2280',
    };
    if (!lineMap[row.line] || lineMap[row.line] == '') return;
    const { dateRange } = condition;
    const [start, end] = dateRange;
    const routerParams: any = {};
    routerParams.tab = lineMap[row.line];
    routerParams.start = start;
    routerParams.end = end;
    router.push({
      path: '/yiledAndSubsection/CalculationOfYieldRate',
      query: routerParams,
    });
  };

  const getYieldTree = async () => {
    try {
      const [start, end] = condition.dateRange;
      const params = { dbegin: start, dend: end, linename: 'all' };
      const res = await ActualPerformanceRollDeviationApi.get_allprocessindexdetails(params);
      if (res.data && res.data.data) {
        const yieldData: YieldItem[] = res.data.data.totalYield;
        yieldData.forEach((item) => {
          const { actualKey, targetKey } = LINE_YIELD_MAPPING[item.linename];
          yieldTree[actualKey] = item.totalznyield;
          yieldTree[targetKey] = item.targetvalue;
        });

        yieldTree.curLine = 'all';
        yieldTree.curTarget = yieldTree.allTarget;
        yieldTree.curActual = yieldTree.allActual;
        getLossAnalysis();
      } else {
        yieldTree.curLine = 'all';
        yieldTree.curTarget = yieldTree.allTarget;
        yieldTree.curActual = yieldTree.allActual;
        ElMessage.info(res.data?.msg || '未查询到数据或响应格式不正确');
      }
    } catch (error) {
      tableData.value = [];
      console.error('获取各产线成材率数据失败');
      throw error;
    }
  };

  const getProdLineYield = async () => {
    try {
      const [start, end] = condition.dateRange;
      const params = { dbegin: start, dend: end, linename: 'all' };
      const res = await ActualPerformanceRollDeviationApi.get_allprocessmachinedetails(params);

      if (res.data && res.data.data) {
        const data = res.data.data.unitCalculationYield;
        const pieData = data
          .map((item: any) => ({
            name: item.linename,
            value: Math.abs(Number(item.rate ?? 0) || 0),
          }))
          .filter((item: any) => item.value > 0);
        const barData = {
          x: data.map((item: any) => item.linename),
          y1: data.map((item: any) => Number(item.targetvalue ?? 0) || 0),
          y2: data.map((item: any) => Number(item.realvalue ?? 0) || 0),
          y3: data.map((item: any) => Number(item.rate ?? 0) || 0),
          config: graphData.barData.config,
        };
        graphData.pieData = pieData;
        graphData.barData = barData;
        graphData.pieOther = data.map((item: any) => Number(item.rate ?? 0) || 0);
        console.log('x:' + graphData.barData.x);
        console.log('y1:' + graphData.barData.y1);
        console.log('y2:' + graphData.barData.y2);
        console.log('y3:' + graphData.barData.y3);
      } else {
        ElMessage.info(res.data?.msg || '未查询到数据或响应格式不正确');
      }
    } catch (error) {
      graphData.pieData = [];
      graphData.barData.x = [];
      graphData.barData.y1 = [];
      graphData.barData.y2 = [];
      graphData.barData.y3 = [];
      console.error('获取数据失败');
      throw error;
    }
  };

  const getWatse = async () => {
    const { curDateType, dateRange, wasteType } = condition;
    const [start, end] = dateRange;
  };

  const getLossAnalysis = async () => {
    try {
      const { curDateType, dateRange, wasteType } = condition;
      const [start, end] = dateRange;
      const params: any = {
        pageIndex: 1,
        pageSize: 20,
        dbegin: start,
        dend: end,
        linename: yieldTree.curLine ?? 'all',
        totalznyield: yieldTree.curActual ?? yieldTree.allActual,
        targetvalue: yieldTree.curTarget ?? yieldTree.allTarget,
      };
      const res = await ActualPerformanceRollDeviationApi.getLossAnalysis(params);
      if (res.data && res.data.data) {
        tableData.value = res.data.data.list_tbAllpricessIndexTableDto;
        yieldTree.summary = res.data.data.details.replace(/(\d+(\.\d+)?%)/g, '<span>$1</span>');
        if (tableData.value.length > 0) spanMap.value = getSpanMap(tableData.value);
      }
    } catch (error) {
      ElMessage.error('获取全流程成材率损失分析数据失败');
      tableData.value = [];
    }
  };

  const fetchData = () => {
    Promise.all([getWatse(), getYieldTree(), getProdLineYield()])
      .then(() => {
        ElNotification({
          title: '提示',
          message: '数据获取成功',
          type: 'success',
          duration: 2000,
        });
      })
      .catch((err: any) => {
        console.error('数据获取失败:' + err);
        ElMessage({
          message: '数据获取失败' + err.message,
          type: 'error',
          duration: 2000,
        });
      });
  };

  onMounted(() => {
    // 初始化时间
    const start = dayjs().subtract(6, 'day').format('YYYY-MM-DD');
    const end = dayjs().format('YYYY-MM-DD');
    condition.dateRange = [start, end];
    fetchData();
  });
</script>
<style lang="less" scoped>
  .home {
    background: url(/src/assets/images/yield/yield-bg.png);
  }
  .page-layout {
    display: flex;
    flex-direction: column;
    min-height: 95vh;
    // gap: 1vh;
    margin-top: -10vh;
    padding: 20px;
    width: 99.5%;
  }

  .area {
    background-color: rgba(12, 37, 87, 0.5);
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(19, 163, 255, 0.25), rgba(19, 163, 255, 0.25), rgba(19, 163, 255, 0.4)) 1 1;
    padding: 12px;
    opacity: 0.9;
  }

  .title {
    display: flex;
    align-items: center;
  }

  .title img {
    margin-top: -0.6vh;
  }

  .title span {
    font-weight: 700;
    font-size: 16px;
    font-family: '江城斜黑体', sans-serif;
    background-image: linear-gradient(to bottom, rgba(49, 190, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(48, 117, 211, 0.8)) drop-shadow(0 0 3px rgba(48, 117, 211, 0.6));
  }

  .main-container {
    display: flex;
    // justify-content: space-between;
    gap: 0.2vw;
    height: 68vh;
    padding: 0.5vh;
  }

  .table-container {
    width: 100%;
    // height: 26vh;
    flex: 1;
    padding: 0.5vh 0.2vw;
  }

  .yield-card {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 20%;
    height: 100%;
    padding: 0 0.2vw;
  }

  :deep(.date-picker.el-date-editor) {
    background: #0d1845;
    border: 1px solid #0c83cf;
    width: 14vw;
    box-shadow: 0 0 0 1px #0d1845 inset;
  }

  :deep(.date-picker .el-range-input) {
    background-color: transparent !important;
    color: #fff !important;
    font-weight: 400;
    font-family: 'Source Han Sans', sans-serif;
  }

  :deep(.date-picker .el-range-separator) {
    background-color: transparent !important;
    color: #fff !important;
    font-weight: 400;
    font-family: 'Source Han Sans', sans-serif;
  }

  :deep(.custom-date-picker .el-input__icon) {
    color: #fff !important;
  }

  .buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5vw;

    button {
      width: 2.6vw;
      color: rgba(216, 240, 255, 0.5);
      text-shadow: 0px 0px 4px #0091ff;
      font-weight: 400;
      font-size: 14px;
      background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.95) 100%);
      border: 1px solid rgba(0, 45, 89, 0.8);
      font-family: 'Source Han Sans-Regular', sans-serif;
      cursor: pointer;
      text-align: center;
    }

    button.is-active {
      color: #d8f0ff;
      text-shadow:
        0px 0px 10px #0091ff,
        0px 0px 4px #0091ff;
      background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.95) 100%);
      border: 1px solid rgba(30, 123, 214, 0.8);
    }
  }

  .main-yield {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    margin-top: 5vh;

    .main-condition {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      width: 100%;

      .condition {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5vw;
      }
    }

    .yields {
      position: relative;
      text-align: center;

      .ab-text {
        position: absolute;
        font-weight: 500;
        font-size: 16px;
        color: #e2ebfa;
        text-align: center;
        font-family: 'Source Han Sans', sans-serif;
        cursor: pointer;

        .value {
          font-family: 'DINCondensed-bold', sans-serif;
          font-weight: 700;
          font-size: 32px;
          text-align: center;
        }
      }

      .pos-all {
        position: absolute;
        font-weight: 500;
        font-size: 22px;
        color: #e2ebfa;
        font-family: 'Source Han Sans', sans-serif;
        text-align: center;
        top: 2vh;
        right: 19vw;
        cursor: pointer;

        .common-text {
          color: #6af457;
          font-family: 'Source Han Sans-Regular', sans-serif;
          font-weight: 400;
          font-size: 26px;
        }

        .actual {
          color: #6af457;
          font-family: 'DINCondensed-bold', sans-serif;
          font-weight: 700;
          font-size: 38px;
        }

        .target {
          color: #6af457;
          font-family: 'DINCondensed-bold', sans-serif;
          font-weight: 700;
          font-size: 26px;
        }
      }

      .pos-cold {
        top: 9vh;
        left: 10vw;
      }

      .pos-1630 {
        bottom: 10vh;
        left: 4vw;
      }

      .pos-2150 {
        bottom: 10vh;
        left: 15vw;
      }

      .pos-1870 {
        top: 15vh;
        right: 5vw;
      }
    }

    .text-sub {
      flex: 1;
      display: flex;
      position: relative;
      align-items: end;
      text-align: center;

      img {
        width: 100%;
      }

      .summary-text {
        width: 90%;
        position: absolute;
        color: #e2ebfa;
        top: 4vh;
        left: 5%;
        text-align: center;
        font-family: 'Source Han Sans-Medium', sans-serif;
        font-weight: 500;
        font-size: 16px;

        :deep(span) {
          font-family: 'DINCondensed-bold', sans-serif;
          font-weight: 700;
          font-size: 28px;
        }
      }
    }
  }

  .yield-graph {
    display: flex;
    flex-direction: column;
    gap: 2vh;

    .pie {
      height: 27vh;
      width: 100%;
    }
    .bar {
      height: 32vh;
      width: 100%;
    }
  }

  .title-head {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    margin-bottom: 4vh;
  }

  .process-container {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 98%;
    margin-left: 1%;

    .process-info {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      width: 99%;
      margin-left: 0.5%;
      font-family: 'Source Han Sans-Medium', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #fff;

      span.process-num {
        font-family: 'DIN Condensed-Bold', sans-serif;
        font-weight: 700;
        font-size: 16px;
      }
    }

    .process-bar {
      display: flex;
      position: relative;
      height: 3vh;
      width: 100%;
      margin-bottom: 2vh;

      .process-background {
        height: 3vh;
        width: 100%;
        background-color: rgba(18, 40, 89, 0.8);
        z-index: 11;
      }

      .process-inner {
        position: absolute;
        z-index: 12;
        height: 100%;
        background: linear-gradient(-90deg, #01fffd 0%, #0379ff 100%);
        animation: progressGrow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
      }

      @keyframes progressGrow {
        from {
          width: 0%;
        }
        to {
          width: var(--target-width);
        }
      }
    }
  }

  :deep(.el-radio-button__inner) {
    color: rgba(216, 240, 255, 0.5);
    text-shadow: 0px 0px 4px #0091ff;
    font-weight: 400;
    font-size: 12px;
    background-color: transparent;
    border: 1px solid rgba(30, 123, 214, 0.3);
  }

  :deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner) {
    color: #d8f0ff;
    text-shadow:
      0px 0px 10px #0091ff,
      0px 0px 4px #0091ff;
    font-weight: 400;
    font-size: 12px;
    background-color: transparent;
    border: 1px solid rgba(30, 123, 214, 0.8);
  }

  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-left: 1px solid rgba(30, 123, 214, 0.3);
  }

  .time-period-picker {
    :deep(.el-input__wrapper) {
      background-color: transparent !important;
    }

    :deep(.el-input__inner) {
      color: #fff;
    }

    :deep(.el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 0.06rem rgba(255, 255, 255, 0.9) inset;
    }

    :deep(.el-input__prefix) {
      color: #fff;
    }
  }

  :deep(.el-table) {
    background-color: transparent;
    --el-table-border: none;
    --el-table-border-color: transparent;
    color: white;
    --el-table-row-hover-bg-color: unset;

    :deep(.el-table__row:nth-child(odd)) {
      background-color: #223671;
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }
  :deep(.el-table__row:nth-child(odd)) {
    background-color: rgba(6, 13, 47, 0.5);
  }
  :deep(.el-table__row:nth-child(even)) {
    background-color: rgba(21, 29, 81, 0.5);
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }
</style>
